<template>
  <div class="main">
    <!-- 1.0 头部导航结构 -->
    <van-nav-bar
      title="我的关注"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push({ path: '/' })"
    >
    </van-nav-bar>

    <div class="cell" v-for="(item, index) in followList" :key="item.id">
      <div class="profile">
        <van-image
          :src="item.head_img | imgUrl"
          width="100%"
          height="100%"
        ></van-image>
      </div>
      <div class="desc">
        <h3 class="name">{{ item.nickname }}</h3>
        <p class="data">{{ item.create_date | formatDate }}</p>
      </div>
      <div class="floowe" @click="flooweFn(item.id, index)" :class="{red: item.isFollow}">
        {{ item.isFollow ? "取消关注" : "再次关注" }}
      </div>
    </div>
  </div>
</template>

<script>
import {
  getUserFollowsApi,
  userFollowsApi,
  userunFollowsApi,
} from "../apis/user.js";
export default {
  async created() {
    const res = await getUserFollowsApi();
    // console.log(res);
    this.followList = res.data.data.map((item) => {
      return { ...item, isFollow: true };
    });
  },
  methods: {
    async flooweFn(id, index) {
      console.log(id,index);
      if (this.followList[index].isFollow) {
        const res = await userunFollowsApi(id);
        console.log(res);
      } else {
        const res = await userFollowsApi(id);
        console.log(res);
      }
      this.followList[index].isFollow = !this.followList[index].isFollow;
    },
  },
  data() {
    return {
      followList: [],
    };
  },
};
</script>

<style lang="less" scoped>
.red{
      background: rgb(236, 25, 60);
  }
.cell {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: solid 1px #d7d7d7;
  
  .profile {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: pink;
    margin-right: 10px;
    
  }

  .desc {
    flex: 1;
    .name {
      font-size: 15px;
    }

    .data {
      font-size: 10px;
      color: #a5a5a5;
    }
  }

  .floowe {
    padding: 2.33333vw 2.66667vw;
    border-radius: 20px;
    
  }
}
</style>